<template>
  <label class="light-match-text">
    <template v-for="(item,index) in matchList">
      <template v-if="(index + 1) % 2 === 0">
        <label :style="{color:props.lightColor}">{{item}}</label>
      </template>
      <template v-else>
        {{item}}
      </template>
    </template>
  </label>
</template>

<script lang="ts" setup>
import { ref, defineProps,withDefaults,watch } from 'vue'
import type {Color} from "@/types/code";
const props = withDefaults(defineProps<{
  text: string
  lightText: string
  lightColor: Color
}>(),{
  text: '',
  lightText: '',
  lightColor: 'rgb(56,189,248)'
})
const matchList = ref<string[]>([])
const fnMatch = (text: string, lightText: string):string[] => {
  const result = []
  if(text){
    const splitList = text.split(lightText)
    const startNode = splitList[0]
    result.push(startNode)
    for(let i = 1;i < splitList.length;i ++){
      result.push(lightText)
      result.push(splitList[i])
    }
  }
  console.log('result', result)
  return result
}
watch(() => [props.text,props.lightText],(newVal: string[]) => {
  matchList.value = fnMatch(newVal[0],newVal[1])
},{deep: true,immediate: true})
</script>

<style scoped lang="scss">
.no-data{
  &-text__default{

  }
}
</style>